<template>
  <view class="component-container" :style="{ paddingBottom: safeAreaBottom + 'px' }">
    <view class="view-content">
      <slot name="content"></slot>
    </view>
    <slot name="control"></slot>
  </view>
</template>

<script setup lang="ts">
import $store from '@/store'
const { safeAreaBottom } = $store.app.getSystemParam()
console.log('safeAreaBottom=', safeAreaBottom)
</script>

<style scoped lang="scss">
.component-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  box-sizing: border-box;

  .view-content {
    flex-grow: 1;
    overflow: scroll;
  }
}
</style>
